<style scoped lang="less">
  @import "action-edit";
</style>
<template>
  <div>
    <Select v-model="item.type" style="width:200px" :disabled="limitType">
      <Option v-for="type in types" :value="type.value" :key="type.value">{{ type.name }}</Option>
    </Select>
    <SelectImg :limit="1"
               :initList="(item.img!==undefined&&item.img!=null)?item.img:[]"
               :flag="flag"
               @on-del-img="onDelImg"
               @on-selected-imgs="onCheckedImgs">
    </SelectImg>
    <div  v-if="item.type===GLOBAL.TYPE_LINK_SUBJECT">
      <div v-if="item.value!==undefined&&item.value!==null" class="subject-selected-wrap">
        <img alt="图片" class="subject-selected-img" v-if="item!==undefined&&item.oriimg!=null&&item.oriimg.length>0"
             :src="GLOBAL.getUrl(item.oriimg[0],true)"/>
        <div class="subject-selected-title">{{item!==undefined?item.title:'请选择专题'}}</div>
      </div>
      <Button type="info" @click="select" style="margin-right: 8px">选择</Button>
    </div>
	  <div  v-if="item.type===GLOBAL.TYPE_LINK_ACTIVE">
		  <div v-if="item.value!==undefined&&item.value!==null" class="subject-selected-wrap">
			  <img alt="图片" class="subject-selected-img" v-if="item!==undefined&&item.oriimg!=null&&item.oriimg.length>0"
			       :src="GLOBAL.getUrl(item.oriimg[0],true)"/>
			  <div class="subject-selected-title">{{item!==undefined?item.title:'请选择活动'}}</div>
		  </div>
		  <Button type="info" @click="select" style="margin-right: 8px">选择</Button>
	  </div>
	  <div  v-if="item.type===GLOBAL.TYPE_LINK_CATEGORY">
		  <div v-if="item.value!==undefined&&item.value!==null" class="subject-selected-wrap">
			  <img alt="图片" class="subject-selected-img" v-if="item!==undefined&&item.oriimg!=null&&item.oriimg.length>0"
			       :src="GLOBAL.getUrl(item.oriimg[0],true)"/>
			  <div class="subject-selected-title">{{item!==undefined?item.title:'请选择分类'}}</div>
		  </div>
		  <Button type="info" @click="select" style="margin-right: 8px">选择</Button>
	  </div>
    <div v-if="item.type===GLOBAL.TYPE_OTHER_LINK">
      <Input class="input-item" v-model="item.link" style="width: 230px;margin: 2px;">
        <span slot="prepend">链接:</span>
      </Input>
    </div>
    <Modal   v-model="modalSetting.show" width="668" :styles="{top: '5px', width:'80%',height: '95%' }">
      <QSelectSubject :type="item.type" @subject-ok="selected" :flag="flag"></QSelectSubject>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
    import SelectImg from '../select-img'
    import QSelectSubject from '../select-subject'
    export default {
        name: 'qaction-edit',
        props: {
            limitType: {type: Boolean, default: false},//是否限制选择的链接类型
            flag: {type: Number, default: null},
            initItem: {
                type: Object,
                default: function () {
                    return {type:0,title:null, img: null,value:null};
                }
            }
        },
        components: {
            SelectImg,
            QSelectSubject
        },
        data() {
            return {
                item:this.initItem,
                modalSetting: {
                    show: false,
                    loading: false
                },
                type_noop: 0,
                type_subject_link: 1,
                type_other_link: 2,
								//这里的type只用于操作，不与实际数据中的type有关联
                types: [{name: '无操作', value: this.GLOBAL.TYPE_NORMAL},
	                {name: '专题', value: this.GLOBAL.TYPE_LINK_SUBJECT},
	                {name: '产品', value: this.GLOBAL.TYPE_LINK_ACTIVE},
	                {name: '分类', value: this.GLOBAL.TYPE_LINK_CATEGORY},
	                {name: '外部链接', value: this.GLOBAL.TYPE_OTHER_LINK}]
            }
        },
        created() {
            // this.type_noop = this.GLOBAL.TYPE_NORMAL;
            // this.type_subject_link = this.GLOBAL.TYPE_LINK_SUBJECT;
            // this.type_active_link = this.GLOBAL.TYPE_LINK_ACTIVE;
            // this.type_subject_link = this.GLOBAL.TYPE_LINK_SUBJECT;
            // this.type_other_link = this.GLOBAL.TYPE_OTHER_LINK;
        },
        methods: {
            selected(data) {
                if(data.flag === this.flag){
                    this.item.active_type = data.data.active_type;
                    this.item.value = data.data.value;
                    this.item.oriimg = JSON.parse(JSON.stringify(data.data.img));
                    this.item.img = data.data.img;
                    this.item.title = data.data.title;
                    this.$emit('action-data-change',{data:this.item,flag:this.flag});
                    this.cancel();
                }
            },
            select() {
                this.modalSetting.show = true;
            },
            cancel() {
                this.modalSetting.show = false;
            },
            onCheckedImgs(data) {
                if(data.flag === this.flag){
                    this.item.img = data.imgs;
                }
                this.$emit('action-data-change',{data:this.item,flag:this.flag});
            },
            onDelImg(data) {
                if(data.flag === this.flag){
                    // if(this.item.oriimg!==undefined&&this.item.oriimg!==null&&this.item.oriimg.length>0){
                    //     this.item.img = JSON.parse(JSON.stringify(this.item.oriimg))
                    // }else {
                        this.item.img = null;
                    // }
                    this.$emit('action-data-change',{data:this.item,flag:this.flag});
                }
            }
        }
    }
</script>
